<template>
  <div class="Parking">
    <div class="ParkingImg"></div>
    <div class="Parkingcontent">
      <div class="ParkingInfoImg"></div>
      <div class="ParkingInfo">
        <div class="ParkingInfoTop">
          <div class="PInfoTopLeftImg">
            <div class="PInfoTopLeftNum">
              {{ total }}
              <span>总数</span>
            </div>
          </div>
          <div class="PInfoTopRightImg">
            <div class="PInfoTopRightNum">
              {{ free }}
              <span>空闲数</span>
            </div>
          </div>
        </div>
        <div class="ParkingInfoMiddle">
          <div class="PInfoTopMiddleImg"></div>
        </div>
        <div class="ParkingInfoBottom">
          <div class="PInfoTopBottomImg">
            <div class="PInfoTopBottomNum">
              {{ userd }}
              <span>占用数</span>
            </div>
          </div>
        </div>
      </div>
      <div class="ParkingList">
        <div class="ParkingTitle">
          <div class="ParkingTitleLeft">
            <div class="leftImg"></div>
            <div class="leftText">已占用</div>
            <div class="l_rightImg"></div>
          </div>
          <div class="ParkingTitleRight">
            <div class="rightImg"></div>
            <div class="rightText">空闲</div>
            <div class="r_rightImg"></div>
          </div>
        </div>
        <div class="ParkingListContent">
          <div class="ParkingListLeftContent">
            <el-table
              :data="tableData"
              height="61"
              style="width: 100%; height: 61px; overflow: hidden"
            >
              <el-table-column
                label="车牌号"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="使用时间"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="使用人"
                :show-overflow-tooltip="true"
              ></el-table-column>
              <el-table-column
                label="联系方式"
                :show-overflow-tooltip="true"
              ></el-table-column>
            </el-table>
            <div class="vue-seamless-parking">
              <vue-seamless-scroll :data="tableData" class="seamless-warp">
                <ul>
                  <li
                    v-for="(item, index) in tableData"
                    :key="index"
                    @click="ocuClick($event)"
                  >
                    <el-row>
                      <el-col :span="6" :data-obj="JSON.stringify(item)">{{
                        item.carCode
                      }}</el-col>
                      <el-col :span="6" :data-obj="JSON.stringify(item)">{{
                        item.duration
                      }}</el-col>
                      <el-col :span="6" :data-obj="JSON.stringify(item)">{{
                        item.user
                      }}</el-col>
                      <el-col :span="6" :data-obj="JSON.stringify(item)">{{
                        item.contactInformation
                      }}</el-col>
                    </el-row>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="ParkingListRightContent">
            <!-- 滚动效果 -->
            <div class="rollTitle">
              <el-row>
                <el-col :span="24">车位编号</el-col>
              </el-row>
            </div>
            <div class="vue-seamless">
              <vue-seamless-scroll
                :data="jinchuData"
                class="seamless-warp freePoi"
              >
                <ul>
                  <li
                    v-for="item in tableDataFree"
                    :key="item.id"
                    @click="freeShow($event)"
                  >
                    <el-row>
                      <el-col
                        :span="24"
                        class="rollItem"
                        :data-obj="JSON.stringify(item)"
                        >{{ item.parkingMumber }}</el-col
                      >
                    </el-row>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="ParkingTable">
          <div class="ParkingTableTitle">
            <div class="tableleftImg"></div>
            <div class="tableText">进出记录信息</div>
            <div class="tablerightImg"></div>
          </div>
          <div class="ParkingTableList">
            <!-- 滚动效果 -->
            <div class="rollTitle">
              <el-row>
                <el-col :span="3">序号</el-col>
                <el-col :span="7">车牌号</el-col>
                <el-col :span="7">进出类型</el-col>
                <el-col :span="7">时间</el-col>
              </el-row>
            </div>
            <div class="vue-seamless" @click="showTurnDetails($event)">
              <vue-seamless-scroll :data="jinchuData" class="seamless-warp">
                <ul>
                  <li v-for="item in jinchuData" :key="item.id">
                    <el-row>
                      <el-col
                        :span="3"
                        class="rollItem"
                        style="
                          font-family: dig;
                          font-family: dig;
                          font-weight: 900;
                          font-size: 30px;
                        "
                        :data-obj="JSON.stringify(item)"
                      >
                        {{ item.id }}
                      </el-col>
                      <el-col
                        :span="7"
                        class="rollItem"
                        :data-obj="JSON.stringify(item)"
                        >{{ item.carNum }}
                      </el-col>
                      <el-col
                        :span="7"
                        class="rollItem"
                        :data-obj="JSON.stringify(item)"
                      >
                        <span v-if="item.type === '出'" class="zc">{{
                          item.type
                        }}</span>
                        <span v-else class="cr">{{ item.type }}</span>
                      </el-col>
                      <el-col
                        :span="7"
                        class="rollItem"
                        :data-obj="JSON.stringify(item)"
                        >{{ item.date }}</el-col
                      >
                    </el-row>
                  </li>
                </ul>
              </vue-seamless-scroll>
            </div>
          </div>
          <!--进出记录详情-->
          <div class="turn-details" v-if="isShowDetail">
            <div class="details-header">
              <div class="details-header-title">进出记录信息详情</div>
              <div class="details-header-close">
                <span @click="closeTurn">×</span>
              </div>
            </div>
            <div class="details-body">
              <div class="details-info">
                <div class="turn-order">序号：{{ info.id }}</div>
                <div class="car-number">车牌号：{{ info.carNum }}</div>
                <div class="turn-type">进出类型：{{ info.type }}</div>
                <div class="turn-time">时间：{{ info.date }}</div>
              </div>
              <div class="details-img">
                <el-image
                  style="width: 100%; height: 490px"
                  :src="imgPath"
                  fit="fill"
                >
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { fmtDate } from "../../../../utils/date.js";
import { TUVector3, TURotator } from "tumap/dist/tumap.v1.8.js";
import axios from "axios";
export default {
  components: {
    vueSeamlessScroll,
  },
  mounted() {
    this.$nextTick(() => {
      axios.get("./static/json/allUEEquipment.json").then((res) => {
        this.ueData = res.data;
      });
    });
  },
  data() {
    return {
      jinchuData: [],
      tableData: [],
      tableDataFree: [],
      investmentRecordData: [],
      free: "0",
      total: "0",
      userd: "0",
      isShowDetail: false,
      info: {},
      imgPath: "",
      ueData:[]
    };
  },
  filters: {
    filtedate: function (date) {
      let t = new Date(date);
      return fmtDate(t, "yyyy-MM-dd");
    },
  },
  sockets: {
    sendParkingStatus(data) {
      let res = JSON.parse(data);
      this.free = res.free;
      this.total = res.total;
      this.userd = res.used;
    },
    /**
     * 占用
     */
    sendParkingOccupy(data) {
      let res = JSON.parse(data);
      this.tableData = res;
    },
    /**
     * 空闲
     */
    sendParkingFree(data) {
      let res = JSON.parse(data);
      res.forEach((item) => {
        item.isParking = item.isParking == "1" ? "占用" : "空闲";
      });
      this.tableDataFree = res;
    },
    /**
     * 进出记录
     */
    sendParkingRecord(data) {
      let recordInfo = JSON.parse(data);
      this.jinchuData = [];
      for (let i = 0; i < recordInfo.data.length; i++) {
        let item = recordInfo.data[i];
        this.jinchuData.push({
          id: i + 1,
          pic: item.url,
          carNum: item.licensePlate,
          type: item.inOutType,
          date: item.date.split(" ")[1],
        });
      }
    },
  },
  methods: {
    showTurnDetails(e) {
      this.isShowDetail = true;
      let value = JSON.parse(e.target.dataset.obj);
      window.Sgworld&&window.Sgworld.clearAllCovering();
      if (value.type === "进") {
        window.Sgworld &&
          window.Sgworld.flyTo(
            12076.123046875,
            -5596.8271484375,
            10,
            0,
            -35,
            96,
            275,
            () => {},
            4
          );
      } else {
        window.Sgworld &&
          window.Sgworld.flyTo(
            12644,
            -5181,
            10,
            0,
            -35.809967041015625,
            -96.23989868164062,
            274.60662841796875,
            () => {},
            4
          );
      }
      // 处理图片地址
      this.imgPath = value.pic.replace(/\\/g, "/");
      this.info = value;
    },
    closeTurn() {
      this.isShowDetail = false;
    },
    // 点击空闲车位显示
    freeShow(e) {
      var tem = JSON.parse(e.target.dataset.obj);
      var carCode = tem.parkingMumber;
      var allUE = JSON.parse(JSON.stringify(this.ueData))
      for(var i=0;i<allUE.length;i++){
        var item = allUE[i]
        if(item.name == carCode){
          window.Sgworld && window.Sgworld.flyTo(item.location.x, item.location.y, item.location.z, 0, -90, 0, 200, () => {}, 4);
          return
        }
      }
      window.UEGetAll();
    },
    // 已占用每一行点击
    ocuClick(e) {
      var tem = JSON.parse(e.target.dataset.obj);
      var carCode = tem.parkingMumber;
      var allUE = JSON.parse(JSON.stringify(this.ueData))
      for(var i=0;i<allUE.length;i++){
        var item = allUE[i]
        if(item.name == carCode){
          debugger
          window.Sgworld && window.Sgworld.flyTo(item.location.x, item.location.y, item.location.z, 0, -90, 0, 200, () => {}, 4);
          return
        }
      }
      window.UEGetAll();
    },
  },
};
</script>

<style scoped>
.seamless-warp {
  height: 340px;
  overflow: hidden;
}
.freePoi {
  height: 240px;
  overflow: hidden;
}
.Parking {
  width: 100%;
  height: 64%;
}
.Parking .ParkingImg {
  width: 493px;
  height: 114px;
  background: url("../../../../../static/images/operate/车位信息.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;
  margin-left: -50px;
}
.Parkingcontent {
  width: 100%;
  height: calc(100% - 112px);
}
.ParkingInfoImg {
  width: 732px;
  height: 64px;
  background: url("../../../../../static/images/operate/停车场.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.ParkingInfo {
  width: 100%;
  height: 238px;
}
.ParkingInfoTop {
  width: 100%;
  height: 80px;
  margin-top: 50px;
  display: flex;
}
.ParkingInfoBottom {
  width: 100%;
  height: 80px;
  margin-top: -30px;
}
.PInfoTopLeftImg {
  width: 225px;
  height: 80px;
  background: url("../../../../../static/images/operate/停车场总数.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 50px;
}
.PInfoTopLeftNum {
  font-size: 31px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 69px;
  margin-left: 90px;
}
.PInfoTopLeftNum > span {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #dff5ff;
  line-height: 27px;
}
.PInfoTopRightImg {
  width: 225px;
  height: 80px;
  background: url("../../../../../static/images/operate/停车场空闲数.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 320px;
}
.PInfoTopRightNum {
  font-size: 31px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 69px;
  margin-left: 90px;
}
.PInfoTopRightNum > span {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #dff5ff;
  line-height: 27px;
}
.PInfoTopMiddleImg {
  width: 404px;
  height: 146px;
  background: url("../../../../../static/images/operate/汽车.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 240px;
  margin-top: -50px;
}
.PInfoTopBottomImg {
  width: 225px;
  height: 80px;
  background: url("../../../../../static/images/operate/停车场占用数.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 240px;
}
.PInfoTopBottomNum {
  font-size: 31px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #ffffff;
  line-height: 69px;
  margin-left: 90px;
}
.PInfoTopBottomNum > span {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #dff5ff;
  line-height: 27px;
}
.ParkingList {
  width: 100%;
  height: 400px;
}
.ParkingTitle {
  width: 100%;
  height: 60px;
  display: flex;
}
.ParkingTitleLeft {
  width: 60%;
  height: 60px;
  display: flex;
}
.ParkingTitleRight {
  width: 40%;
  height: 60px;
  display: flex;
}
.leftImg {
  width: 85px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级左.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 150px;
}
.l_rightImg {
  width: 93px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级右.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 17px;
  margin-top: 20px;
}
.leftText {
  width: 190px;
  height: 60px;
  font-size: 28px;
  font-family: Source Han Sans SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 60px;
  letter-spacing: 12px;
  margin-left: 65px;
}

.rightImg {
  width: 85px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级左.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 151px;
}
.r_rightImg {
  width: 93px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级右.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-right: 22px;
  margin-top: 20px;
}
.rightText {
  width: 190px;
  height: 60px;
  font-size: 28px;
  font-family: Source Han Sans SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 60px;
  letter-spacing: 12px;
  margin-left: 24px;
}
.ParkingListContent {
  width: 100%;
  height: calc(100% - 60px);
  display: flex;
}
.vue-seamless-parking .seamless-warp {
  font-size: 24px;
  height: 240px;
}
.ParkingListLeftContent {
  width: 692px;
  height: 320px;
  background: url("../../../../../static/images/operate/已占用.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 10px;
  padding: 0 20px;
  box-sizing: border-box;
}
.ParkingListRightContent {
  width: 233px;
  height: 320px;
  background: url("../../../../../static/images/operate/空闲.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
  margin-top: 10px;
  padding: 0 20px;
  box-sizing: border-box;
}
.el-table /deep/ thead {
  color: #ffffff !important;
  font-size: 26px !important;
  background: transparent !important;
  /* background: #ffffff !important; */
}
.ParkingListLeftContent .el-table /deep/ th {
  background-color: transparent !important;
  color: #53e1cb !important;
  font-size: 26px !important;
  /* height: 60px !important; */
}
.ParkingListRightContent .el-table /deep/ th {
  background-color: transparent !important;
  color: #00b4ff !important;
  font-size: 26px !important;
  /* height: 60px !important; */
}
.ParkingTableList .el-table /deep/ th {
  background-color: transparent !important;
  color: #71a0ff !important;
  font-size: 26px !important;
  box-sizing: border-box;
  padding: 0 20px;
}
.ParkingTable {
  width: 100%;
  height: 472.39px;
}
.ParkingTableTitle {
  width: 100%;
  height: 60px;
  display: flex;
}
.tableleftImg {
  width: 85px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级左.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 260px;
}
.tablerightImg {
  width: 93px;
  height: 20px;
  background: url("../../../../../static/images/operate/二级右.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin-top: 20px;
  margin-left: 30px;
}
.tableText {
  width: 241px;
  height: 60px;
  font-size: 28px;
  font-family: Source Han Sans SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 60px;
  letter-spacing: 12px;
  margin-left: 40px;
}
.ParkingTableList {
  width: 100%;
  height: 412.39px;
  background: url("../../../../../static/images/operate/进出记录信息.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.zc,
.cr {
  display: inline-block;
  width: 80px;
  height: 35px;
  line-height: 35px;
  font-size: 26px;
  border-radius: 5px;
  background: #0b98fe;
}
.cr {
  background: #f6a411;
}
.el-table /deep/ td,
.el-table /deep/ th {
  border-bottom: 1px solid white !important;
}
.el-table::before {
  height: 0 !important;
}
/* 进出详情 */
.turn-details {
  width: 1200px;
  height: 800px;
  position: absolute;
  right: 1441px;
  top: 540px;
  font-size: 35px;
  background: url("../../../../../static/images/operate/backgroundimg.jpg");
  background-size: 100% 100%;
  opacity: 0.8;
  font-family: Source Han Sans SC;
  border-radius: 10px;
  z-index: 5000;
}
.turn-details .details-header {
  overflow: hidden;
  padding: 50px;
  border-bottom: 2px solid deepskyblue;
}
.turn-details .details-header .details-header-title {
  float: left;
}
.turn-details .details-header .details-header-close {
  float: right;
  cursor: pointer;
}
.turn-details .details-header .details-header-close:hover {
  color: #00a2ff;
}
.turn-details .details-body {
  overflow: hidden;
  padding: 50px 100px;
}
.turn-details .details-body .details-info {
  float: left;
  width: 40%;
}
.turn-details .details-body .details-info div {
  margin-bottom: 95px;
}
.turn-details .details-body .details-img {
  float: left;
  background-color: #fff;
  width: 60%;
  height: 490px;
}
</style>
